<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>批改练习 - 在线练习系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/grade-practice.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0CB07B',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        light: '#FFFFFF'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
            }
        }
        body {
            background-image: url('/images/background.jpg'); /* 假设图片放在public/images目录下 */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            z-index: -1;  /* 确保低于内容层级 */
        }

            body::before {
                display:none;
            }
        /* 添加下拉菜单样式 */
    #user-dropdown{
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    #user-dropdown a:hover{
        background-color: #f9fafb;
    }
    </style>
</head>
<body class="bg-neutral font-inter text-dark">
    <header class="bg-primary text-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-book-open text-white text-2xl"></i>
                <h1 class="text-xl font-bold text-white">在线练习系统</h1>
            </div>
            <nav>
                <ul class="flex space-x-6 items-center">
                    <li><a href="#" class="text-white hover:text-neutral-200 transition-colors duration-300">返回</a></li>
                </ul>
            </nav>
            <div class="flex items-center space-x-3">
                <!-- 修改开始：添加用户信息容器 -->
                <div id="user-info-container" class="hidden text-right mr-2">
                    <div id="user-name" class="font-medium text-white"></div>
                    <div id="student-id" class="text-xs text-white/80"></div>
                </div>
                <!-- 头像区域（添加下拉菜单） -->
                <div class="relative">
                    <a href="#" id="user-avatar" class="text-white hover:text-neutral-200 transition-colors duration-300">
                        <i class="fa-solid fa-user-circle text-xl"></i>
                    </a>
                    <!-- 下拉菜单 -->
                    <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden">
                        <a href="#" onclick="editProfile()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-user-edit mr-2"></i>编辑个人资料
                        </a>
                        <a href="#" onclick="logout()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
    </header>

    <main class="container mx-auto px-4 py-8 bg-gradient-to-br from-blue-50/80 to-indigo-100/80 rounded-xl shadow-lg border border-blue-200/50 backdrop-blur-sm">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-blue-800 flex items-center gap-2">
                <i class="fas fa-check-circle text-blue-600"></i>
                批改练习
            </h2>
            <button id="backButton" class="px-4 py-2 rounded-lg bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 hover:from-gray-200 hover:to-gray-300 transition-all shadow-sm hover:shadow-md flex items-center">
                <i class="fa-solid fa-arrow-left mr-2"></i>返回
            </button>
        </div>
    
        <div class="bg-white/90 rounded-xl shadow-md p-6 mb-6 border border-blue-100/50">
            <div class="filter-container grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div class="form-group">
                    <label for="judgmentFilter" class="block text-blue-600 mb-2 font-medium">评阅状态：</label>
                    <select id="judgmentFilter" class="w-full px-4 py-2 border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-400 bg-white">
                        <option value="all">全部</option>
                        <option value="unjudged">未评阅</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="sortFilter" class="block text-blue-600 mb-2 font-medium">排序方式：</label>
                    <select id="sortFilter" class="w-full px-4 py-2 border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-400 bg-white">
                        <option value="default">默认</option>
                        <option value="earliest">最早提交</option>
                    </select>
                </div>
            </div>
    
            <div id="practiceList" class="space-y-6">
                <!-- 练习列表会通过JavaScript动态生成 -->
            </div>
        </div>
    </main>

    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">在线练习系统</h3>
                    <p class="text-gray-400">提供高质量的在线练习服务，帮助师生提升教学效果。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><i class="fa-solid fa-envelope mr-2"></i> softclass-platform@qq.com</li>
                        <li><i class="fa-solid fa-phone mr-2"></i> 114-514-1919-810</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 软课程管理平台 版权所有</p>
            </div>
        </div>
    </footer>

    <script type="module" src="/js/grade-practice.js"></script>
</body>
</html>